@mixin bg-top($url){
  position: absolute;
  background: url($url);
  height: pxToRem(5);
  top: -0.17rem;
  left: 0;
  width: 100%;
}
@mixin bg-bottom($url) {
  position: absolute;
  bottom: -0.17rem;
  left: 0;
  background: url($url);
  height: pxToRem(5);
  width: 100%;
  transform: rotate(180deg);
}

@mixin coupon($col1,$col2,$url1,$url2){
  .coupon-main { background-color: $col1;}
  .coupon-action { background-color: $col2; .scan { color: $col2;} }
  .coupon-main {
    &::before { content: '';@include bg-top($url1);}
    &::after {content: '';@include bg-bottom($url1);}
  }
  .coupon-action {
    &::before {content: '';@include bg-top($url2);}
    &::after {content: '';@include bg-bottom($url2);}
  }
}

.coupons-view {
  padding: 0 pxToRem(30);
  .tabs {
    margin: 0 pxToRem(-30);
    background-color: #fff;
    .tab-item-view {
      width: 33.33%;
      text-align: center;
    }
  }
  .coupons {
    margin-bottom: pxToRem(40);
    .coupon-item {
      padding-top: pxToRem(20);
      .coupon {
        font-size: 0;
        color: #fff;
        &.status0 {
          @include coupon(#ff5142,#e44242,"../../../../img/m/coupon/red-l.png","../../../../img/m/coupon/red-r.png")
        }
        &.status1 {
          @include coupon(#ff8e3d,#ff7637,"../../../../img/m/coupon/orange-l.png","../../../../img/m/coupon/orange-r.png")
        }
        &.status2 {
          @include coupon(#e4e4e4,#e4e4e4,"../../../../img/m/coupon/grey-b.png","../../../../img/m/coupon/grey-b.png");
          .coupon {
            color: #999;
            .coupon-action {
              .scan {
                background-color: #f5f5f5;
                color: #999;
              }
            }
          }
        }
        .coupon-main, .coupon-action {
          display: inline-block;
          position: relative;
          height: pxToRem(230);
          vertical-align: top;
          line-height: 1;
          text-align: center;
        }
        .coupon-main {
          width: calc(100% - 230px);
          .title {
            font-size: pxToRem(48);
            margin-top: pxToRem(30);
          }
          .condition {
            font-size: pxToRem(24);
            margin-top: pxToRem(18);
          }
          .expiry-date {
            font-size: pxToRem(20);
            margin-top: pxToRem(40);
          }
        }
        .coupon-action {
          width: 230px;
          border-left: 4px dotted #fff;
          box-sizing: border-box;
          .name {
            font-size: pxToRem(28);
            margin-top: pxToRem(40);
          }
          .scan {
            display: inline-flex;
            align-items: center;
            font-size: pxToRem(28);
            margin-top: pxToRem(20);
            height: pxToRem(50);
            line-height: pxToRem(50);
            padding: 0 pxToRem(16);
            background-color: #fff;
            img {
              width: pxToRem(26);
              height: pxToRem(26);
              margin-right: pxToRem(10);
            }
          }
          .num {
            font-size: pxToRem(20);
            margin-top: pxToRem(40);
          }
        }
      }
    }
  }
}

